<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script src="../../assets/js/jquery-2.0.3.min.js"></script>
    <script src="../../assets/js/bootstrap.min.js"></script>
    <script src="../../assets/js/hammer.min.js"></script>
    <script src="../../assets/js/bootstrap.table/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="../../assets/js/bootstrap.table/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
    <script src="../../assets/ztree/js/jquery.ztree.all.min.js" type="text/javascript"></script>
    <script src="../../assets/js/dialog.js" type="text/javascript"></script>
    <script src="../../assets/js/jquery.cookie.js" type="text/javascript" ></script>
    <script src="../../assets/js/common.js" type="text/javascript"></script>
    <script src="../../assets/js/myUrl.js" type="text/javascript"></script>

    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../assets/css/bootstrap.table/bootstrap-table.min.css"/>
    <link href="../../assets/css/dialog.css" rel="stylesheet" />
    <link href="../../assets/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <link href="../../assets/css/common.css" rel="stylesheet" />
</head>
<script type="text/javascript">
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        data: {
            key: {
                children: "treeVoList"
            }
        },
        check: {
            enable: false
        },
        callback: {
            onClick: zTreeOnClick
        }
    };

    /**添加角色、用户所需要的树*/
    var setting2 = {
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "ps", "N": "s" }
        },
        callback: {
            onClick: zTreeOnClick
        }
    };
    /**添加角色、用户所需要的树*/
    var setting3 = {
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "ps", "N": "s" }
        },
        callback: {
            onClick: zTreeOnClick
        }
    };


    $(document).ready(function () {
        //调用函数，初始化表格
        initTable(1);
        initTree();
        initInput();

        //新增
        $("#btn_add").on("click",function () {
            addDict();
        });

        //修改
        $("#btn_edit").on("click",function () {
            editDict();
        });

    })
    
    function initTree() {
        var treeJson = myAjax({prentId: 1}, local_url.dept_tree, "GET").data.treeVoList;
        var result = [
            { "id":1, "name":"组织架构",
                isParent:true,
                nocheck:true,
                "treeVoList": treeJson
            }
        ];
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, result);
    }

    function addDict(){
        clearInput();
        var elem1 = document.getElementById('addEditDictDataForm');
        dialog({
            title: "字典数据",
            content: elem1,
            width: '40em',
            okValue: "确定",
            ok: function () {
                if(saveCheckDataInfo()){
                    var pid = $("#parentId").val();
                    var dataValue = {};
                    dataValue["name"] = $("#deptName").val();
                    dataValue["type"] = $("#deptType").val();
                    dataValue["pid"] = pid;
                    dataValue["deptPostsStatus"] = $("#deptPostsStatus").val();
                    var b = saveCommon(local_url.dept_add, dataValue, "PUT");
                    if(b){
                        initTable(pid);
                        initTree();
                    }
                    return b;
                }else {
                    return false;
                }
            },
            cancelValue: '取消',
            cancel: function () {}
        }).showModal();
    }

    function zTreeOnClick(event, treeId, treeNode) {
        $("#parentId").val(treeNode.id)
        initTable(treeNode.id);
    }

    function editDict() {
        var valueInfo = $('#mytab').bootstrapTable('getSelections');
        putValue(valueInfo[0]);
        if(valueInfo!=null&&valueInfo!=""&&valueInfo.length>0){
            var elem1 = document.getElementById('addEditDictDataForm');
            dialog({
                title: "字典数据",
                content: elem1,
                width: '40em',
                okValue: "确定",
                ok: function () {
                    if(saveCheckDataInfo()){
                        var pid = $("#parentId").val();
                        var dataValue = {};
                        dataValue["id"] = valueInfo[0].id;
                        dataValue["name"] = $("#deptName").val();
                        dataValue["type"] = $("#deptType").val();
                        dataValue["pid"] = pid;
                        dataValue["deptPostsStatus"] = $("#deptPostsStatus").val();
                        var b = saveCommon(local_url.dept_edit, dataValue, "PUT");
                        if(b){
                            initTable(pid);
                            initTree();
                        }
                        return b;
                    }else {
                        return false;
                    }
                },
                cancelValue: '取消',
                cancel: function () {}
            }).showModal();
        }else {
            promptDail('请选择一条数据!');
        }
    }

    function clearInput(){
        $("#deptName").val("");
        $("#deptType").val("1");
        $("#deptPostsStatus").val("1");
    }

    //失去焦点判断是否为空
    function initInput() {
        $("#deptName").blur(function(){
            var info = $(this).val();
            if(info!=null&&info!=""){
                $(this).next().hide();
            }else {
                $(this).next().show();
            }
        });
    }

    //修改放入选择的数据
    function putValue(valueInfo) {
        $("#deptName").val(valueInfo.name);
        $("#deptType").val(valueInfo.type);
        $("#deptPostsStatus").val(valueInfo.deptPostsStatus);
    }


    function saveCheckDataInfo() {
        var b = true;
        b = checkValue("deptName");
        if(!b){
            promptDail('请填写完整数据!');
        }
        var parentId =$("#parentId").val();
        if(parentId==null||parentId==''){
            promptDail('请先选择上级单位!');
            return false;
        }
        return b;
    }
    function initTableRow(){
        var pid = $("#parentId").val();
        var deptName = $("#queryName").val();
        initTable(pid, deptName);
    }

    function initTable(prentId, deptName) {
        var options = {};
        options["parentId"] = prentId;
        options["deptName"] = deptName;
        commonInitTable(local_url.dept_list, "mytab", options);
    }

    function editRoles(ids, type) {
        if(type!=4||type!="4"){
            promptDail('岗位才能添加!');
            return false;
        }

        $("#editRoleDeptId").val(ids);
        var elem = document.getElementById('editRoles');
        var treeJson = myAjax({deptId: ids}, local_url.dept_role_list, "GET").data;
        var result = [{ "id":1,
            name:"角色列表",
            isParent:true,
            nocheck:true,
            open: true,
            children: treeJson
        }];
        zTreeObj = $.fn.zTree.init($("#treeRoleDemo"), setting2, result);

        dialog({
            title: "添加部门角色",
            content: elem,
            width: '280px',
            okValue: "确定",
            ok : function () {
                var nodes = zTreeObj.getCheckedNodes(true);
                if(saveDeptRole(nodes, ids)){
                    return true;
                }else {
                    return false;
                }

            },
            cancelValue: '取消',
            cancel: function () {}
        }).showModal();
    }

    function saveDeptRole(nodes,ids){
        var jsonstr = "[]";
        var jsonarray = eval('('+jsonstr+')');
        if(nodes==null||nodes.length<=0){
            return false;
        }
        for(var i=0;i<nodes.length;i++){
            var nodeInfo = nodes[i];
            var jsonTemp = {"roleId": nodeInfo.id,"deptId": ids,"deptRoleStatus":"1"};
            jsonarray.push(jsonTemp);
        }
        var result = myAjaxJSON(jsonarray,local_url.dept_edit_deptRole,"PUT");
        if(result.code=="200"){
            promptDail("保存成功！");
            return true;
        }else if(result.code!="5000") {
            promptDail("保存失败！");
        }

        return false;
    }

    function editUsers(ids, type) {
        if(type!=4||type!="4"){
            promptDail('岗位才能添加!');
            return false;
        }
        $("#editUserDeptId").val(ids);
        var elem = document.getElementById('editUsers');
        var treeJson = myAjax({deptId: ids}, local_url.dept_user_list, "GET").data;
        var result = [{ "id":1,
            name:"用户列表",
            isParent:true,
            nocheck:true,
            open: true,
            children: treeJson
        }];
        zTreeObj = $.fn.zTree.init($("#treeUserDemo"), setting2, result);

        dialog({
            title: "添加部门角色",
            content: elem,
            width: '280px',
            okValue: "确定",
            ok : function () {
                var nodes = zTreeObj.getCheckedNodes(true);
                if(saveDeptUser(nodes, ids)){
                    return true;
                }else {
                    return false;
                }

            },
            cancelValue: '取消',
            cancel: function () {}
        }).showModal();
    }

    function saveDeptUser(nodes,ids){
        var jsonstr = "[]";
        var jsonarray = eval('('+jsonstr+')');
        if(nodes==null||nodes.length<=0){
            return false;
        }
        for(var i=0;i<nodes.length;i++){
            var nodeInfo = nodes[i];
            var jsonTemp = {"userId": nodeInfo.id,"deptId": ids,"deptRoleStatus":"1"};
            jsonarray.push(jsonTemp);
        }
        var result = myAjaxJSON(jsonarray,local_url.dept_edit_deptUser,"PUT");
        if(result.code=="200"){
            promptDail("保存成功！");
            return true;
        }else if(result.code!="5000") {
            promptDail("保存失败！");
        }

        return false;
    }

</script>
<body style="padding:5px;overflow:auto;">
<div style="width: 15%;float:left;border-right: 1px solid #ffffff;">
    <ul id="treeDemo" class="ztree">

    </ul>
</div>
<div style="width: 85%;float:left;">

    <input type="text" class="form-control" id="parentId" name="parentId"   style="display:none"/>
    <div class="panel panel-default" >
        <div class="panel-heading">
            查询条件
        </div>
        <div class="panel-body form-group" style="margin-bottom:0px;">
            <form id="searchForm">
                <label class=" control-label" style="float:left;text-align: left; margin-top:5px">名称：</label>
                <input type="text" class="form-control" style="width: 100px;float:left;" name="queryName" id="queryName"/>
                <div class="col-sm-1" style="float:left;">
                    <button class="btn btn-primary" id="search_btn" onclick="initTableRow();return false;">查询</button>
                </div>
            </form>
        </div>
    </div>
    <div id="toolbar" class="btn-group pull-right"  style="margin: 0px 0px 5px 0px;">
        <button id="btn_edit" type="button" class="btn btn-default btn-purview" style=" border-radius: 0">
            <span class="glyphicon glyphicon-pencil"  ></span>修改
        </button>
        <button id="btn_add" type="button" class="btn btn-default btn-purview">
            <span class="glyphicon glyphicon-plus" ></span>新增
        </button>
    </div>
    <table id="mytab" data-toggle="table" class="table table-hover table-bordered" data-single-select="true"
           data-toolbar-align="right" data-toolbar="#toolbar" data-pagination="true"  data-page-size="5" data-striped="true"
           data-page-list="[5,10,20,30]" data-pagination-h-align="right" data-pagination-detail-h-align="left"
           data-pagination-loop="false" data-click-to-select="true" >
        <colgroup>
            <col style="width: 3%">
            <col style="width: 7%">
            <col style="width: 20%">
            <col style="width: 10%">
            <col style="width: 10%">
            <col style="width: 15%">
        </colgroup>
        <thead>
        <tr >
            <th data-align="center" data-valign="middle" data-checkbox="true" ></th>
            <th data-align="center" data-valign="middle" data-field="id">id</th>
            <th data-align="center" data-valign="middle" data-field="name">名称</th>
            <th data-align="center" data-valign="middle" data-field="type" data-formatter="initFormatStatus">类型</th>
            <th data-align="center" data-valign="middle" data-field="type" data-visible="false">状态</th>
            <th data-align="center" data-valign="middle" data-field="deptPostsStatus" data-formatter="initFormat">是否启用</th>
            <th data-align="center" data-valign="middle" data-field="deptPostsStatus" data-visible="false">状态</th>
            <th data-align="center" data-valign="middle" data-formatter="initEdit">操作</th>
        </tr>
        </thead>
    </table>
</div>

<div id="addEditDictDataForm" style="display: none;">
    <div style="width: 100%;margin-top: 10px;height: 260px;overflow-x: hidden;overflow-y: auto;">
        <form class="form-horizontal" id="nodeDataForm" role="form">

            <div class="form-group">
                <label class="col-sm-3 control-label">职位名称:<span style="color: red;">*</span></label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" style="width: 80%" id="deptName" name="deptName"  placeholder="职位名称"/>
                    <span class="help-block" style="color: red; display: none;">职位名称</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">职位类型<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <select class="form-control" id="deptType" name="deptType" style="width: 30%">
                        <option value="1" >公司</option>
                        <option value="2" >子公司</option>
                        <option value="3" >部门</option>
                        <option value="4" >岗位</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">是否启用:</label>
                <div class="col-sm-8">
                    <select class="form-control" id="deptPostsStatus" name="deptPostsStatus" style="width: 20%">
                        <option value="1" >是</option>
                        <option value="2" >否</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="editRoles" style="display: none;">
    <input id="editRoleDeptId" style="display: none">
    <div style="width: 100%;margin-top: 10px;">
        <form class="form-horizontal" id="roleForm" role="form">
            <input id="roleIds" name="roleIds" hidden="hidden"/>
            <div style="width: 200px;height: 200px;overflow-y: auto;overflow-x: hidden">
                <ul id="treeRoleDemo" class="ztree" style="width: 220px;height: 200px;">

                </ul>
            </div>
        </form>
    </div>
</div>

<div id="editUsers" style="display: none;">
    <input id="editUserDeptId" style="display: none">
    <div style="width: 100%;margin-top: 10px;">
        <form class="form-horizontal" id="userForm" role="form">
            <div style="width: 200px;height: 200px;overflow-y: auto;overflow-x: hidden">
                <ul id="treeUserDemo" class="ztree" style="width: 220px;height: 200px;">

                </ul>
            </div>
        </form>
    </div>
</div>

</body>

<script type="text/javascript">
    function initFormat(val, row, index) {
        if(val==1||val=="1"){
            return "启用";
        }else {
            return "停用";
        }
    }
    function initFormatStatus(val, row, index) {
        if(val==1||val=="1"){
            return "公司";
        } else if(val==2||val=="2"){
            return "子公司";
        } else if(val==3||val=="3"){
            return "部门";
        } else if(val==4||val=="4"){
            return "岗位";
        } else {
            return "其他";
        }
    }

    function initEdit(val, row, index) {
        var html = "<a href='javascript:void(0)' onclick='editRoles("+row.id+","+row.type+")'>【添加角色】</a>";
        html += "<a href='javascript:void(0)' onclick='editUsers("+row.id+","+row.type+")'>【添加用户】</a>"
        return html;
    }
</script>
</html>